<template>
    <div class="ywtpay-wrapper">
        <div class="content-wrapper">
            <div class="ywtlogo"><img src="../../images/ywtlog.png"/></div>
            <div class="ywtts">支持银联扫码支付</div>
            <div class="content-process">
                <div class="process-content">
                    <img src="../../images/lc1.png"/>
                    <div class="nr"><span class="red">支付微信、支付宝、招商银行</span>扫描二维码，进入手机支付页面。</div>
                </div>
                <div class="process-content">
                    <img src="../../images/lc2.png"/>
                    <div class="nr">如果您的支付宝、微信、招商银行还没有绑定<span class="red">银联卡</span>，请现在app绑定您要使用的<span class="red">银联卡</span></div>
                </div>
                <div class="process-content">
                    <img src="../../images/lc3.png"/>
                    <div class="nr">绑定<span class="red">银联卡</span>之后，<span class="red">扫码付费</span>，完成购买</div>
                </div>
            </div>
            <div class="process"><img src="../../images/jdt.png"/></div>
            <div class="all-btn">
                <button class="sweep-code" @click="sweepcodePay">扫码付款</button>
                <button class="back" @click="backPage">返回</button>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{

        }
    },
    methods:{
        sweepcodePay(){
            console.log(this.$route.query.jsoData)
            let newWin = window.open('','_blank'),
            formStr =
            `<form 
              style="visibility:hidden;"
              method="POST"
              action="${this.$route.query.payurl}"
              target="_self" 
              id="newWinForm"
            >
              <input type="hidden" name="jsonRequestData" value=${this.$route.query.jsoData} />
              <input type="hidden" name="charset" value="utf-8" />
            </form>`
  

            newWin.document.body.innerHTML = formStr;
            let newWinForm = newWin.document.getElementById('newWinForm')
            newWinForm.acceptCharset = "utf-8";
            newWinForm.onsubmit = "document.charset='utf-8'";
            newWinForm.submit();
        },
        backPage(){
            this.$router.go(-1)
        }
    }
}
</script>
<style lang="stylus" scoped  rel="stylesheet/stylus">
@import '~style/base.styl';
@import '~style/modifyselect.styl';

.btnspec {
    width: 144px;
    height: 44px;
    border-radius: 2px;
    background: #fff;
    line-height: 44px;
    text-align: center;
    display: inline-block;
    font-family:MicrosoftYaHei;
    font-weight:400;
    font-size:18px
}
.ywtpay-wrapper
{
    .content-wrapper{   
        margin: 60px auto 120px;
        width: 1200px;
        min-width: 1200px;

        .ywtlogo{
            width:124px;
            height:38px
            img{
                width:100%;
                height:100%
            }
        }
        .ywtts{
            margin-top 19px;
            font-size:14px;
            font-family:MicrosoftYaHei;
            font-weight:400;
            color:rgba(118,118,118,1);
        }
        .content-process{
            margin-top:27px;
            display:flex;
            flex-direction:row;
            justify-content: space-around;
            .process-content{
                line-height:20px;
                text-align:center;
                width:248px;
                height:196px;
                padding:0 15px
                &:nth-child(2)
                {
                    padding: 0;
                    width: 280px;
                }
                .nr{
                    margin-top:25px;
                    color:#767676;
                    font-size:14px;
                    font-family:MicrosoftYaHei;
                    font-weight:400;
                    .red{
                        color:#FF6252
                    }
                }
            }
        }
        .process{
            width:885px;
            height:50px;
            margin: 27px auto 0;
            img{
                width:100%;
                height:100%
            }
        }
        .all-btn{
            width: 100%;
            text-align: left;
            margin-top: 60px;
            .sweep-code {
                @extend .btnspec;
                margin-right: 25px;
                border: none;
                background: $color-theme;
                text-decoration: none;
                color: $color-text;

                &:hover {
                background: $color-background-more;
                color: $color-text;
                }
          }

          .back{
                @extend .btnspec;
                border: 1px solid $color-theme-btn;
                color: $color-theme-btn;
                cursor: pointer;
                background: $color-background-det;

                &:hover {
                background: $color-theme;
                color: $color-text;
                }

                &.disable {
                border: 1px solid #e5e5e5;
                color: #767676;
                background: #e5e5e5;
                }
          }
        }
    }
}
</style>


